//资讯管理
import React from 'react'
import {Row, Col, Button, DatePicker, Select,Modal  } from 'antd'
import styles from './index.css'
import ArticleTable from './articleTable'
import { connect } from 'dva'
import {Link} from 'dva/router'
const {RangePicker} = DatePicker;
const Option = Select.Option;
const confirm = Modal.confirm;

class ArticleList extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            page: 1,
            endTime:'',
            startTime:'',
            status:'',
        }
    }
    //点赞置顶操作
    handleIcon =(value)=>{
        const { endTime, startTime, status, page } = this.state;
        this.props.dispatch({
            type:'articleList/topArt',
            payload:{
                value,
                page,
                endTime,
                startTime,
                status,
            }
        })
    }

    //点击选择页码查询
    changePage =(value)=>{
        const {endTime,startTime,status} = this.state;
        this.setState({
            page:value
        });
        this.props.dispatch({
            type:'articleList/page',
            payload:{
                size:10,
                start:value,
                endTime:endTime,
                startTime:startTime,
                status:status
            }
        })
    }

    //选择发布日期查询
    selectData =(date, dateString)=> {
        const {status} = this.state;
        this.setState({
            startTime:dateString[0],
            endTime:dateString[1],
        });
        this.props.dispatch({
            type:'articleList/page',
            payload:{
                size:10,
                start:1,
                startTime:dateString[0],
                endTime:dateString[1],
                status:status
            }
        })
    }
    //选择发布状态查询
    handleChange =(value)=>{
        const {endTime,startTime,} = this.state;
        this.setState({
            status:value
        });
        this.props.dispatch({
            type:'articleList/page',
            payload:{
                size:10,
                start:1,
                endTime:endTime,
                startTime:startTime,
                status:value
            }
        })
    }

    //点击发布
    submit =(value)=>{
        const {dispatch} = this.props;
        const { status, endTime, startTime, page} = this.state;
        confirm({
            title: '确定发布该条资讯？',
            content: '请谨慎操作！',
            okText: '确定',
            cancelText: '取消',
            onOk() {
                dispatch({
                    type:'articleList/releaseArt',
                    payload:{
                        value,
                        page,
                        endTime,
                        startTime,
                        status,
                    }
                });
            },
            onCancel() {
            },
        });
    }

    //点击删除
    handleDelete =(value)=>{
        const {dispatch} = this.props;
        const { status, endTime, startTime, page } = this.state;
        confirm({
            title: '确定删除该条资讯？',
            content: '请谨慎操作！',
            okText: '确定',
            cancelText: '取消',
            onOk() {
                dispatch({
                    type:'articleList/deleteArt',
                    payload:{
                        value,
                        page,
                        endTime,
                        startTime,
                        status,
                    }
                })
            },
            onCancel() {
            },
        });
    }

    //点击下架
    handleOff =(value)=>{
        const {dispatch} = this.props;
        const { status, endTime, startTime,page } = this.state;
        confirm({
            title: '确定下架该条资讯？',
            content: '请谨慎操作！',
            okText: '确定',
            cancelText: '取消',
            onOk() {
                dispatch({
                    type:'articleList/offShelve',
                    payload:{
                        value,
                        page,
                        endTime,
                        startTime,
                        status,
                    }
                });
            },
            onCancel() {
            },
        });
    }
    render(){
        return (
            <div className={styles.main}>
                <Row>
                    <Col span={8} className={styles.Col}>
                        <Row>
                            <Col span={8}>
                                <span className={styles.span}>发布时间：</span>
                            </Col>
                            <Col span={16} id="rang">
                                <RangePicker 
                                    onChange={this.selectData} 
                                    getPopupContainer={() => document.getElementById('rang')}
                                />
                            </Col>
                        </Row>
                    </Col>
                    <Col span={6} className={styles.Col}>
                        <Row>
                            <Col span={8}>
                                <span className={styles.span}>发布状态：</span>
                            </Col>
                            <Col span={16} id="status">
                                <Select 
                                    allowClear
                                    style={{ width: 120 }} 
                                    onChange={this.handleChange} getPopupContainer={() => document.getElementById('status')}
                                    placeholder="请选择"
                                >
                                    <Option value="1">草稿</Option>
                                    <Option value="2">发布中</Option>
                                    <Option value="3">已下架</Option>
                                </Select>
                            </Col>
                        </Row>
                    </Col>
                    <Col span={9} className={styles.Col}>
                        <Link to='/bshrecipes/addArticle'>
                            <Button type='primary' className={styles.button} >新增资讯</Button>
                        </Link>
                    </Col>
                    <Col span={1}></Col>
                </Row>
                <ArticleTable 
                    changePage={this.changePage}
                    handleIcon={this.handleIcon}
                    submit={this.submit}
                    handleDelete={this.handleDelete}
                    handleOff={this.handleOff}
                />
            </div>
        )
    }
}
export default connect(({articleList})=>({articleList}))(ArticleList)